<template>
  <CardMenu :menuList="menuList"></CardMenu>
</template>

<script setup>
const menuList = [
  {
    title: 'cl-icon-select',
    des: '图标下拉选择器，支持elementPlus内置图标与iconfont 的 Symbol图标',
    path: '/comp/icon-select',
  },
  {
    title: 'cl-table-page',
    des: '适合普通的web后台表格页面，上面是搜索模块，中间操作按钮，底部是表格跟分页',
    path: '/comp/table-page',
  },
]
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 28px;
  box-shadow: 0px 10px 10px 0px rgba(154, 153, 154, 0.15);
}

.menu {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: 20px;

  &_item {
    cursor: pointer;

    .title {
      font-size: 26px;
      font-weight: bold;
    }

    .subtitle {
      padding-left: 10px;
    }

    .content {
      font-size: 14px;
    }
  }
}
</style>
